<template>
  <div>
    <!-- 轮播图 -->
    <mt-swipe :auto="2000">
      <!-- 谁使用此轮播图组件 谁为我们传递lunbotulist -->
      <!-- 此时 lunbotulist 应该是 父组件向子组件传值来设置 -->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
        <img :src="item.img" alt="" :class="{full:'isfull' }">
      </mt-swipe-item>
    </mt-swipe>
  </div>



  <!-- 为什么商品评论轮播图很丑? -->
  <!-- 1.首页中的图片他的宽和高都是使用了100% -->
  <!-- 2.在商品详情页面中轮播图的图片如果也使用宽和高百分之百就不合适了 -->
  <!-- 3.商品详情页面中的轮播图页面期望高度半分之百  宽度自适应 -->
  <!-- 4.经过分析得到问题的原因 首页中的轮播图和详情中的轮播图,分歧点是宽度百分百还是自适应 -->
  <!-- 5.既然这两个轮播图其他方面都是没有冲突 知识宽度有分歧 那么我们可以定义一个属性 让使用轮播图的调用者手动指定是否为百分之百 -->



</template>

<script>
  export default {
    props: ["lunbotuList", "isfull"]
  }
</script>

<style lang="scss" scoped>
  .mint-swipe {
    height: 200px;

    .mint-swipe-item {
      text-align: center;

      &:nth-child(1) {
        background-color: red;
      }

      &:nth-child(2) {
        background: url('../../images/menu1.png');
      }

      &:nth-child(3) {
        background-color: yellowgreen;
      }

      img {
        /* width: 100%; */
        height: 100%;
      }
    }
  }

  .full {
    width: 100%;
  }
</style>